<template>
    <div class="login">
        <div class="warp-conter">
            <div class="left-bg">
                <div class="l-title">
                    <img src="../assets/images/login_slices/logo@2x.png" />
                    <p>近多出行后台管理系统</p>
                </div>
            </div>
            <div class="right-form">
                <div class="form-box">
                    <el-form
                        ref="loginForm"
                        :model="loginForm"
                        :rules="loginRules"
                        class="login-form"
                    >
                        <h3 class="title">初始密码修改</h3>
                        <p class="alertMess">您好,为了您的账户安全,请修改初始密码</p>
                        <el-form-item prop="oldPassword">
                            <el-input
                                v-model="loginForm.oldPassword"
                                type="password"
                                auto-complete="off"
                                placeholder="初始密码"
                                onkeyup="value=value.replace(/[\u4E00-\u9FA5]/g,'')"
                            >
                                <svg-icon
                                    slot="prefix"
                                    icon-class="password"
                                    class="el-input__icon input-icon"
                                />
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="newPassword">
                            <el-input
                                v-model="loginForm.newPassword"
                                type="password"
                                auto-complete="off"
                                placeholder="新密码"
                                onkeyup="value=value.replace(/[\u4E00-\u9FA5]/g,'')"
                            >
                                <svg-icon
                                    slot="prefix"
                                    icon-class="password"
                                    class="el-input__icon input-icon"
                                />
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="confirmPassword">
                            <el-input
                                v-model="loginForm.confirmPassword"
                                type="password"
                                auto-complete="off"
                                placeholder="确认密码"
                                onkeyup="value=value.replace(/[\u4E00-\u9FA5]/g,'')"
                            >
                                <svg-icon
                                    slot="prefix"
                                    icon-class="password"
                                    class="el-input__icon input-icon"
                                />
                            </el-input>
                        </el-form-item>
                        <el-form-item style="width: 100%">
                            <el-button
                                :loading="loading"
                                size="medium"
                                type="primary"
                                style="width: 100% !important"
                                @click.native.prevent="handleLogin"
                            >
                                <span v-if="!loading">密码修改</span>
                                <span v-else>修 改 中...</span>
                            </el-button>
                        </el-form-item>
                    </el-form>
                    <div class="el-login-footer">
                        <span
                            >Copyright&nbsp;©2021&nbsp;Jinduo&nbsp;Mobility&nbsp;Services&nbsp;(Beijing)&nbsp;Corporation.&nbsp;京ICP备20025048号</span
                        >
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { updateUserPwds } from "@/api/system/user.js";
import {  removeToken} from "@/utils/auth";
export default {
    name: "Login",
    data() {
        const equalToPassword = (rule, value, callback) => {
        if (this.loginForm.newPassword !== value) {
            callback(new Error("两次输入的密码不一致"));
        } else {
            callback();
        }
        };
        // 密码校验 长度不能小于8位且不能大于20位字符,必须包含大写字母、小写字母、数字和特殊符号
        const ISPWD =/^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$/;
        const validatePassword = (rule, value, callback) =>{
        if (!ISPWD.test(this.loginForm.newPassword)) {
            callback(new Error("用户密码必须包含大写字母、小写字母、数字和特殊符号"));
        } else {
            callback();
        }
        };
        return {
            codeUrl: "",
            loginForm: {
                oldPassword: "",
                newPassword: "",
                confirmPassword: '',
            },
            // 表单校验
            loginRules: {
                oldPassword: [
                { required: true, message: "初始密码不能为空", trigger: "blur" }
                ],
                newPassword: [
                { required: true, message: "新密码不能为空", trigger: "blur" },
                { min: 8, max: 20, message: '用户密码长度必须介于 8 和 20 之间', trigger: 'blur' },
                { required: true, validator: validatePassword, trigger: 'blur' }
                ],
                confirmPassword: [
                { required: true, message: "确认密码不能为空", trigger: "blur" },
                { required: true, validator: equalToPassword, trigger: "blur" }
                ]
            },
            loading: false,
        };
    },
    watch: {
       
    },
    created() {
      
    },
    methods: {
        handleLogin() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    updateUserPwds(this.loginForm.oldPassword, this.loginForm.newPassword).then((res)=>{
                        if(res.code==200){
                            this.$modal.msgSuccess("修改成功");
                            this.loading = false
                            removeToken()
                            this.$router.push("/login");
                        }else{
                            this.loading = false
                        }
                    }).catch((res)=>{
                        this.loading = false
                    })
                }
            });
        },
    },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.login {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    background-image: url("../assets/images/login_slices/bg@2x.png");
    background-size: cover;

    .warp-conter {
        position: relative;
        width: 63.3%;
        height: 66.7%;
        display: flex;
        min-width: 1078px;
        min-height: 560px;
        align-items: center;

        .left-bg {
            position: absolute;
            z-index: 1000;
            width: 50%;
            height: 100%;
            background: url("../assets/images/login_slices/xt@2x.png") no-repeat;
            background-size: 100% 100%;
            // background-percentage:100%100%;

            .l-title {
                margin: 40px 30px;

                img {
                    width: 155px;
                    height: 44px;
                    display: block;
                }

                p {
                    font-size: 16px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    color: #323f4b;
                    line-height: 45px;
                }
            }
        }

        .right-form {
            position: absolute;
            right: 0;

            display: flex;
            flex-direction: row-reverse;
            width: 80%;
            height: 86%;
            background-color: #fff;
            padding: 44px 50px;
            border-radius: 26px;
            .form-box {
                width: 55%;
                height: 100%;
            }
            .el-login-footer {
                font-size: 10px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #848587;
                line-height: 14px;
            }
        }
    }
}

.title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: black;
    font-weight: 600;
}

.login-form {
    border-radius: 6px;
    background: #ffffff;
    width: 400px;
    padding: 25px 25px 5px 25px;

    .el-input {
        height: 38px;

        input {
            height: 38px;
        }
    }

    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 2px;
    }
}

.login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
}

.login-code {
    width: 33%;
    height: 38px;
    float: right;

    img {
        cursor: pointer;
        vertical-align: middle;
    }
}

.login-code-img {
    height: 38px;
}
.warp-box {
    width: 100%;
    height: 100%;
}
.alertMess{
    color:blueviolet
}
</style>
